import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-bar-special-chart',
  templateUrl: './bar-special-chart.component.html',
  styleUrls: ['./bar-special-chart.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BarSpecialChartComponent implements OnInit {
  @Input() xAxisData = [];
  @Input() data1 = [];
  @Input() data2 = [];
  @Input() data3 = [];
  @Input() data4 = [];
  @Input() givenHeight = "400px";
  options = {};

  constructor() { }

  getHeight() {
    return this.givenHeight;
  }

  ngOnInit(): void {
    for (var i = 0; i < 10; i++) {
      this.xAxisData.push('Class' + i);
      this.data1.push((Math.random() * 2).toFixed(2));
      this.data2.push(-Math.random().toFixed(2));
      this.data3.push((Math.random() * 5).toFixed(2));
      this.data4.push((Math.random() + 0.3).toFixed(2));
  }
    this.options = {
      legend: {
        data: ['bar', 'bar2', 'bar3', 'bar4'],
        left: 10
      },
      brush: {
        toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
        xAxisIndex: 0
      },
      tooltip: {},
      xAxis: {
        data: this.xAxisData,
        name: 'X Axis',
        axisLine: { onZero: true },
        splitLine: { show: false },
        splitArea: { show: false }
      },
      yAxis: {
        inverse: true,
        splitArea: { show: false }
      },
      grid: {
        left: 100
      },
      visualMap: {
        type: 'continuous',
        dimension: 1,
        text: ['High', 'Low'],
        inverse: true,
        itemHeight: 200,
        calculable: true,
        min: -2,
        max: 6,
        top: 60,
        left: 10,
        inRange: {
          colorLightness: [0.4, 0.8]
        },
        outOfRange: {
          color: '#bbb'
        },
        controller: {
          inRange: {
            color: '#2f4554'
          }
        }
      },
      series: [
        {
          name: 'bar',
          type: 'bar',
          stack: 'one',
          emphasis: {
            itemStyle: {
              barBorderWidth: 1,
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowColor: 'rgba(0,0,0,0.5)'
            }
          },
          data: this.data1
        },
        {
          name: 'bar2',
          type: 'bar',
          stack: 'one',
          emphasis: {
            itemStyle: {
              barBorderWidth: 1,
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowColor: 'rgba(0,0,0,0.5)'
            }
          },
          data: this.data2
        },
        {
          name: 'bar3',
          type: 'bar',
          stack: 'two',
          emphasis: {
            itemStyle: {
              barBorderWidth: 1,
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowColor: 'rgba(0,0,0,0.5)'
            }
          },
          data: this.data3
        },
        {
          name: 'bar4',
          type: 'bar',
          stack: 'two',
          emphasis: {
            itemStyle: {
              barBorderWidth: 1,
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowColor: 'rgba(0,0,0,0.5)'
            }
          },
          data: this.data4
        }
      ]
    };
  }


}
